<template>
  <div ref="container" class="detail-view">
    <div class="produc-view">
      <div class="nav-list" :style="{ height: productStyle.height }">
        <div class="nav-i border" :style="imgStyle">
          <div class="upload">
            <icons class="icon" name="add" /> 上传视频
            <input type="file" @change="handleFileUpload" accept="video/mp4" />
          </div>
          <div class="upload-view" @click="showCropperFun('')">
            <icons class="icon" name="add" />上传图片
          </div>
        </div>
        <div
          v-for="(item, i) in goodInfo.Images"
          :key="i"
          class="nav-i"
          :class="item.url === showImg ? 'active' : ''"
          :style="imgStyle"
          @click="showImg = item.url"
        >
          <div
            class="btn1"
            :class="goodInfo.IndexPic === item.Pic ? 'active' : ''"
            @click="setPic(item, 1)"
          >
            1
          </div>
          <div
            class="btn2"
            :class="goodInfo.IndexPicB === item.Pic ? 'active' : ''"
            @click="setPic(item, 2)"
          >
            2
          </div>
          <div class="btn" @click="deleteGood(goodInfo.Images, i)">删除</div>
          <video
            v-if="item.url.includes('.mp4') || item.Pic.includes('.mp4')"
            :src="item.url"
          ></video>
          <img v-else :src="item.url" alt="" />
        </div>
      </div>
      <div class="zoom-img" :style="productStyle">
        <video v-if="showImg.includes('.mp4')" :src="showImg" autoplay></video>
        <zoom-on-hover v-else-if="showImg" :img-normal="showImg" />
      </div>
      <div class="right-view">
        <div class="r-view-box" :style="boxStyle">
          <div class="title">
            <input
              placeholder="商品名称"
              v-model="goodInfo.GoodsName"
              type="text"
            />
          </div>
          <div class="desc">
            <input
              placeholder="商品描述"
              v-model="goodInfo.Introduce"
              type="text"
            />
          </div>
          <div class="price">
            <input
              placeholder="商品价格"
              v-model="goodInfo.Price"
              type="text"
            />元
          </div>
          <div class="color" @click="showCropperFun('color')">
            <img :src="goodInfo.Color[0].Url" alt="" />
          </div>
          <div class="c-title">尺寸</div>
          <div class="c-view">
            <input
              placeholder="尺寸多个用逗号隔开"
              v-model="goodInfo.Size"
              type="text"
            />
          </div>
          <div class="text">
            <input
              placeholder="颜色名称"
              v-model="goodInfo.Color[0].ColorName"
              type="text"
            />
          </div>
          <div class="text-d">
            <textarea
              placeholder="颜色描述"
              v-model="goodInfo.Color[0].Introduce"
            ></textarea>
          </div>
          <div class="descitem" v-for="(desc, i) in goodInfo.Notice" :key="i">
            <div class="title-view">
              <input placeholder="标题" v-model="desc.Title" type="text" />
              <div class="open" @click="desc.open = !desc.open">
                {{ desc.open ? "收起" : "展开" }}
              </div>
              <div class="delete" @click="deleteGood(goodInfo.Notice, i)">
                x
              </div>
            </div>
            <div class="chid-view" :class="desc.open ? 'max' : ''">
              <div
                class="chid"
                v-for="(text, index) in desc.IntroduceList"
                :key="index + 'e'"
              >
                <div class="yuan"></div>
                <input
                  placeholder="描述"
                  class="debc"
                  v-model="desc.IntroduceList[index]"
                  type="text"
                />
                <div
                  class="delete"
                  @click="deleteGood(desc.IntroduceList, index)"
                >
                  x
                </div>
              </div>
              <div class="add-desc" @click="adddescItem(desc.IntroduceList)">
                添加描述
                <icons class="icon" name="add" />
              </div>
            </div>
          </div>
          <div class="add-text" @click="addItem(goodInfo.Notice)">
            添加描述项
            <icons class="icon" name="add" />
          </div>
          <div style="height: 200px">&nbsp;</div>
        </div>
      </div>
    </div>
    <div class="btn-view">
      <div class="btn" @click="saveData">保存</div>
      <div class="btn cancle" @click="cancle">取消</div>
    </div>
    <div v-if="showCropper" class="copper-view">
      <Copper
        :show="false"
        :fixed="false"
        :fixedNumber="curentData.fixedNumber"
        @confirm="confirm"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted, watchEffect } from "vue";
import Copper from "@/components/Copper/index.vue";
import { UploadFile, EditGoods } from "@/server";
import ZoomOnHover from "@/components/ImagMax/ZoomOnHover.vue";
import { useAppStore } from "@/store/modules/user";
const store = useAppStore();
// Import Swiper styles
import "swiper/swiper.css";
const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});
const goodInfo = computed(() => props.info);
const emits = defineEmits(["cancle"]);
const cancle = () => {
  emits("cancle");
};
const imgType = ref("");
const showCropperFun = (type: string) => {
  imgType.value = type;
  showCropper.value = true;
};
const curentData = computed(() => {
  if (imgType.value === "color") {
    return {
      fixedNumber: [200, 200],
    };
  } else {
    return {
      fixedNumber: [1030, 1364],
    };
  }
});
const showImg = ref("");
const showCropper = ref(false);
const confirm = async (file: any) => {
  if (file) {
    let newimgdata = URL.createObjectURL(file);
    const fd = new FormData();
    fd.append("file", file);
    const res: any = await UploadFile(fd);
    if (res.Tag === 1) {
      const FileName = res.Data[0].FileName;
      if (imgType.value === "color") {
        goodInfo.value.Color[0].Url = newimgdata;
        goodInfo.value.Color[0].Pic = FileName;
      } else {
        goodInfo.value.Images.push({
          Pic: FileName,
          url: newimgdata,
        });
      }
      console.log(JSON.stringify(goodInfo.value));
    } else {
      store.error(res.Message); // 错误提示
    }
  }
  showCropper.value = false;
};
const deleteGood = (item: any, index: number) => {
  item = item.splice(index, 1);
};
/**
 * @description: 上传图片
 * @param {*} event
 * @return {*}
 * @author: cool panda
 */
const handleFileUpload = async (event: any) => {
  const file = event.target.files[0];
  let newimgdata = URL.createObjectURL(file);
  const fd = new FormData();
  fd.append("file", file);
  const res: any = await UploadFile(fd);
  if (res.Tag === 1) {
    const FileName = res.Data[0].FileName;
    goodInfo.value.Images.push({
      Pic: FileName,
      url: newimgdata,
    });
    console.log(JSON.stringify(goodInfo.value));
  } else {
    store.error(res.Message); // 错误提示
  }
};
const container = ref<HTMLElement | null>(null);
const productStyle = ref({ minWidth: "1030px", height: "1364px" });
const imgStyle = ref({ width: "190px", height: "250px" });
const boxStyle = ref({ width: "420px" });
watchEffect(() => {
  if (props.info.Images.length > 0) {
    showImg.value = props.info.Images[0].url;
  } else {
    showImg.value = "";
  }
});
const saveData = async () => {
  const res: any = await EditGoods(goodInfo.value);
  if (res.Tag === 1) {
    emits("cancle", true);
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
  console.log(JSON.stringify(goodInfo.value));
};
function onChange(key: any) {
  console.log("change:", key);
}
const adddescItem = (item: any) => {
  item.push("");
};
const addItem = (item: any) => {
  item.push({
    Title: "",
    IntroduceList: [],
  });
  console.log(item);
};
const setPic = (item: any, num: number) => {
  console.log(item);
  if (num === 1) {
    goodInfo.value.IndexPic = item.Pic;
  } else {
    goodInfo.value.IndexPicB = item.Pic;
  }
};
const handleResize: ResizeObserverCallback = (entries) => {
  if (entries[0].target) {
    const containerWidth = entries[0].contentRect.width;
    const w = containerWidth * 0.53;
    const r = 1030 / 1364;
    const w1 = containerWidth * 0.09;
    const r1 = 190 / 250;
    productStyle.value = { minWidth: w + "px", height: w / r + "px" };
    imgStyle.value = { width: w1 + "px", height: w1 / r1 + "px" };
    boxStyle.value = { width: containerWidth * 0.21 + "px" };
  }
};
onMounted(() => {
  const resizeObserver = new ResizeObserver(handleResize);
  if (container.value) {
    resizeObserver.observe(container.value);
  }

  return () => {
    if (container.value) {
      resizeObserver.unobserve(container.value);
    }
    resizeObserver.disconnect();
  };
});
</script>
<style lang="less" scoped>
.detail-view {
  width: 100%;
  height: 100%;
  padding: 20px 20px 0 20px;
  background-color: #ffffff;

  .btn-view {
    box-shadow: rgba(146, 157, 154, 0.3) 0px 4px 10px 0px;
    width: calc(100% - 60px);
    margin-left: -20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .btn {
      &.cancle {
        background-color: #555555;
      }

      margin-right: 40px;
    }
  }

  .produc-view {
    padding-right: 100px;
    width: 100%;
    height: calc(100% - 60px);
    overflow-y: auto;
    width: 100%;
    display: flex;

    .nav-list {
      padding: 0 20px;
      overflow-y: auto;

      .nav-i {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f8f8;
        .btn1 {
          &.active {
            background: #e4452d;
            color: #ffffff;
          }
          cursor: pointer;
          z-index: 1;
          top: 5px;
          left: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          width: 25px;
          height: 25px;
          background-color: #dddddd;
          color: #807c7c;
          font-size: 12px;
          border-radius: 100%;
        }
        .btn2 {
          &.active {
            background: #e4452d;
            color: #ffffff;
          }
          cursor: pointer;
          z-index: 1;
          top: 35px;
          left: 5px;
          display: flex;
          position: absolute;
          align-items: center;
          justify-content: center;
          width: 25px;
          height: 25px;
          font-size: 12px;
          background-color: #dddddd;
          color: #807c7c;
          border-radius: 100%;
        }
        .btn {
          z-index: 1;
          top: 0;
          right: 0;
          cursor: pointer;
          position: absolute;
          padding: 5px 10px;
          background: #000000;
          color: #ffffff;
          font-size: 12px;
        }

        &.active {
          border: 1px solid rgb(33, 182, 40);
        }

        &.border {
          border: 1px dashed #dddddd;
          flex-direction: column;
          .upload {
            position: relative;
            border: 1px dashed #dddddd;
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            .icon {
              width: 30px;
              height: 30px;
              margin-right: 10px;
            }
            input {
              cursor: pointer;
              position: absolute;
              opacity: 0;
              width: 100%;
              height: 100%;
            }
          }
          .upload-view {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            .icon {
              width: 30px;
              height: 30px;
              margin-right: 10px;
            }
          }
        }

        position: relative;
        margin-bottom: 10px;
        video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .zoom-img {
      background-color: #f5f5f5;
      width: 53%;
      height: 1364px;
      video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .right-view {
      flex: 1;
      display: flex;
      justify-content: center;

      .r-view-box {
        height: 100%;
        overflow-y: auto;
        text-align: left;

        .title {
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 33px;
        }

        .desc {
          margin-top: 8px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #555555;
          line-height: 20px;
        }

        .price {
          margin-top: 14px;
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          line-height: 20px;

          input {
            max-width: 92%;
            margin-right: 4px;
          }
        }

        .color {
          margin-top: 60px;
          margin-bottom: 30px;

          img {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: 2px solid #000000;
          }
        }

        .c-title {
          font-size: 15px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 21px;
        }

        .c-view {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 10px;

          .tag {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 20px;
            margin-right: 50px;
          }
        }

        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 44px 0 13px;
          width: 100%;
          height: 50px;
          background: #000000;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
        }

        .text {
          display: inline;
          font-size: 15px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 21px;
          padding-bottom: 5px;
          border-bottom: 1px solid #000000;
        }

        .text-d {
          margin-top: 14px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 20px;
          margin-bottom: 60px;
        }
      }
    }
  }
}

input {
  width: 230px;
  height: 30px;
}

.copper-view {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
}

.add-text {
  padding: 5px;
  background-color: #51a11f;
  margin: 5px 0;
  color: #ffffff;
}

.title-view {
  display: flex;

  .open {
    font-size: 12px;
    width: 50px;
    padding: 5px;
  }
}

.add-desc {
  padding: 5px;
  border: 1px solid #dddddd;
  margin: 5px 0 5px 15px;
}

.chid-view {
  max-height: 0px;
  transition: all 0.3s;
  opacity: 0;
  overflow: hidden;

  &.max {
    overflow: unset;
    opacity: 1;
    max-height: 500px;
  }

  .chid {
    display: flex;
    align-items: center;
  }
}

.yuan {
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  border-radius: 100%;
  background-color: #000000;
  margin-right: 10px;
}

.debc {
  border: none;
  border-bottom: 1px solid #dddddd;
}

.descitem {
  margin-bottom: 10px;
}

.delete {
  padding: 0 5px;
}
</style>
